<template>
  <div class="editDialog">
    <el-dialog title="更改订单信息" :visible.sync="visible">
      <el-form
        :model="userForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
        label-position="right"
      >
        <el-form-item label="价格" prop="order_price">
          <el-input v-model.number="userForm.order_price"></el-input>
        </el-form-item>
        <el-form-item label="是否付款" prop="order_pay">
          <el-select v-model="userForm.order_pay">
            <el-option label="否" value="0"></el-option>
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
            <el-option label="银行卡" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发货" prop="is_send">
          <el-select v-model="userForm.is_send">
            <el-option label="否" value="否"></el-option>
            <el-option label="是" value="是"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="editOrderInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editOrderInfo } from "@/api/order";

export default {
  name: "editDialog",
  data() {
    var check_order_price = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("价格不能为空"));
      } else if (Object.prototype.toString.call(value) !== "[object Number]") {
        callback(new Error("价格为数字类型"));
      } else if (value <= 0) {
        callback(new Error("价格必须大于0"));
      } else {
        //这个必须写 必须具备else
        callback();
      }
    };
    return {
      visible: false,
      userForm: {
        order_id: null,
        order_price: 0,
        order_pay: "0",
        is_send: "是",
      },
      rules: {
        order_price: [
          { required: true, validator: check_order_price, trigger: "blur" },
        ],
        order_pay: [{ required: true, trigger: "blur" }],
        is_send: [{ required: true, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.$bus.$on(
      "orderVisible",
      (order_id, currentPrice, payState, isSend) => {
        this.visible = true;
        this.userForm.order_id = order_id;
        this.userForm.order_price = currentPrice;
        this.userForm.order_pay = payState;
        this.userForm.is_send = isSend;
      }
    );
  },
  methods: {
    editOrderInfo() {
      // console.log(this.userForm);
      editOrderInfo(
        this.userForm.order_id,
        this.userForm.order_price,
        this.userForm.order_pay,
        this.userForm.is_send
      ).then(
        (res) => {
          //   console.log(res);
          this.$message.success("更改成功");
          //刷新
          this.$bus.$emit("changeOrderSuc");
        },
        (err) => {
          this.$message.success("更改失败");
        }
      );
      this.visible = false;
    },
  },
};
</script>

<style  scoped>
.el-select {
  width: 100%;
}
</style>
